<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">age++</button>
  <script>
    let obj = {
      name: 'lsy',
      age: 15
    }
    function girlFriend() {
      console.log('ok');
    }
    // function viewUpdate() {
    //   console.log('试图更新');
    // }
    let proxyObj = new Proxy(obj, {
      get: function (target, key, receiver) {    // 代理对象被访问时触发  // 原对象 对象代理的属性(age)  对象代理过后的属性
        // console.log(target, key, receiver);
        return target[key]
      },
      set: function (target, key, value, receiver) {
        // console.log(target, key, value,receiver);

        // if (value >= 18) {
        //   girlFriend()
        // }

        if (value != target[key]) {
          target[key] = value
          viewUpdate()
        }
      }
    })

    document.getElementById('btn').onclick = function () {
      // proxyObj.age++
      console.log(proxyObj.age)
    }
  </script>
</body>

</html>